//引入重置样式
require("../css/commCss/normalize.css");
//引入重置扩展样式
require("../css/commCss/reset.css");
//引入公共样式
require("../css/commCss/property.css");
//引入公共扩展样式
require("../css/commCss/basic.css");

//引入字体图标样式
require("../lib/font_3139541_zokbtoztf/iconfont.css");

//引入当前页面样式
require("../css/userinfo.less");

//引入axios
const axios = require("axios");

//导入weui
require("weui");
const weui = require("weui.js");

//文档加载事件
document.addEventListener("DOMContentLoaded", function () {
  /**
   * 0:获取元素
   */
  let goback = document.querySelector("#goback"); //返回上一个页面

  /* 
  01:回填函数:判断是否是新用户,如果不是直接渲染后台数据,方便用户之后单独修改每一个数据;如果是新用户直接就不用在渲染,因为初始就是默认的信息
  */
  //01-1发请求获取用户信息
  axios.get("http://139.9.177.51:8099/users/accountinfo", { params: {
    //获取userId的id值,简写
    userId:localStorage.userId
  } }).then(function (res) {
    console.log(res.data.data);
    let data=res.data.data

    //修改昵称,因为昵称是不会为null,因为新账号也会默认是用户手机号,所以不需要判断,直接渲染
    document.querySelector('#nickname').value=data.nickname

    //下面信息如果是新账号的话,先判断在渲染
    //头像
    if(data.imgurl){
      document.querySelector('#imgurl').src=data.imgurl
    }
    //性别
    if(data.gender){
      document.querySelector('#sex').textContent=data.gender
    }
    //生日
    if(data.birthday){
      document.querySelector('#birthday').textContent=data.birthday.substr(0,10)
    }
    //省份
    if (data.address) {
      // console.log(data.address.split(","))
      document.querySelector("#province").textContent = data.address.split(",")[0]
      document.querySelector("#city").textContent = data.address.split(",")[1]
    }
    //多行文本域
    if(data.sign){
      document.querySelector('#sign').textContent=data.sign
      //把初始输入内容的长度赋给0/10中0里
      // console.log(data.sign.length);//就是设置的个性签名内容的长度
      document.querySelector('#curNum').textContent=data.sign.length
    }

    //01-2:给多行文本框添加输入input事件
    document.querySelector('#sign').addEventListener('input',function(){

      //定义一个变量num保存多行文本框值的长度
      let num=this.value.length

      //再把变量num赋值给curNum
      document.querySelector('#curNum').textContent=num
    })
  });
  /**
   *  1:注册返回上一个页面
   */
  goback.addEventListener("click", function () {
    //返回上一个页面
    history.go(-1);
  });

  /**
   * 2:性别
   */
  document.querySelector("#sexPicker").addEventListener("click", function () {
    weui.picker(
      [
        {
          label: "男",
          value: 0,
        },
        {
          label: "女",
          value: 1,
        },
      ],
      {
        /* onChange: function (result) {
                console.log(result);
            }, */ //改变时发生的事件,这里不需要使用
        onConfirm: function (result) {
          //确定时发生的事件
          // console.log(result);//就是一个数组[0]
          // console.log(result[0]);//就为是单项选择器,只有一个值,所以就直接默认索引为0就行
          console.log(result[0].label);
          //渲染到页面
          document.querySelector("#sex").textContent = result[0].label;
        },
        title: "请选择性别",
      }
    );
  });

  /**
   * 3:所在省份
   */
  //定义一个数组保存所有省份信息
  let provinceArr = [];
  //定义一个数组保存某个省份的城市信息
  let cityArr = [];

  //进入页面就获取,避免卡顿,从后端获取省份数据 发请求
  axios.get("http://139.9.177.51:8099/address/province").then(function (res) {
    let data = res.data.data;
    //  console.log(data);
    //再把后端的数据处理成我们所需的数据
    provinceArr = data.map(function (v) {
      return { label: v.name, value: v.addressId };
    });
    //  console.log(provinceArr);
  });
  /*
 这是我们在发请求后正常获取到的数据
  [
      {addressId: 110000, name: '北京市', pid: 0},
      {addressId: 120000, name: '天津市', pid: 0}
  ]

这是下面weui拿的的数据(渲染到页面的数据)
  [
    {label: '四川省',value: 0},
    {label: '湖北省',value: 1},
  ]
但是我们获取到的数据与weui渲染到的数据的键值不一样,所以就是用map进行数据处理

处理完成后,再把provinceArr替换到下面weui里面提示的数组

  */
  document
    .querySelector("#provincePicker")
    .addEventListener("click", function () {
      weui.picker(provinceArr, {
        onConfirm: function (result) {
          // console.log(result[0].label);
          //渲染到页面
          document.querySelector("#province").textContent = result[0].label;
          //定义pid是获取的省的参数id
          // console.log(result[0].value);
          let pid = result[0].value;
          //只有在确定了省份后,就发送city城市的请求
          axios
            .get("http://139.9.177.51:8099/address/city/" + pid)
            .then(function (res) {
              // console.log(res.data.data);//这是确认省份后获取的城市数组
              let data = res.data.data;
              cityArr = data.map(function (v) {
                return { label: v.name, value: v.addressId };
              });
              console.log(cityArr);

              //清除上次选择城市,因为在重新选择了省份后,之前输入的城市的信息没有对应进行修改,清楚这个小bug
              document.querySelector("#city").textContent = cityArr[0].label; //把城市显示的内容设置为省份所对应的第一个城市
              /*  document.querySelector('#city').textContent='请选择' */ //把城市显示的内容设置为请选择
            });
        },
        title: "请选择省份",
      });
    });

  /**
   * 4:所在城市
   */
  document.querySelector("#cityPicker").addEventListener("click", function () {
    weui.picker(cityArr, {
      onConfirm: function (result) {
        console.log(result[0].label);
        //渲染到页面
        document.querySelector("#city").textContent = result[0].label;
      },
      title: "请选择省份",
    });
  });

  /**
   * 5:生日
   */
  //补零函数
  function fillZero(n) {
    //n代表传入的数
    return n < 9 ? "0" + n : n;
  }
  document
    .querySelector("#birthdayPicker")
    .addEventListener("click", function () {
      weui.datePicker({
        start: new Date().getFullYear() - 80, //选择起始的出生年月日
        end: new Date().getFullYear(), //当前的生日,不可能超过现目前的时间
        onConfirm: function (result) {
          //确定时的事件
          // console.log(result);//[o, o, o]是一个数组
          //result[0]是里面的年,result[1]是里面的月,result[2]是里面的日
          let ymdstr = [
            result[0],
            fillZero(result[1]),
            fillZero(result[2]),
          ].join("-");
          console.log(ymdstr);
          //渲染到页面
          document.querySelector("#birthday").textContent = ymdstr;
        },
        title: "多列选择器",
      });
    });

  /*
   *6:头像
   */
  //01:给上传头像的input添加一个change事件(input类型是file文件上传)
  document.querySelector("#fileImg").addEventListener("change", function () {
    //this指的是当前对象this.files要获取的是files,不是通过value,因为头像获取比较特殊,它的类型是file,但是上传可能是多张图片,所以就是files,this.files[]
    // console.log(this.files[0]);
    let file = this.files[0]; //因为在最终获取到的图片只有一张,直接默认长度为1,所以内容只有this.files[0]一个

    //实例化一个fd对象(头像图片上传必须借助FormData)
    let fd = new FormData();

    //再把参数追加到fd对象中
    fd.append("imgurl", file);//所以file就相当于上传头像的路径

    //上传头像发送请求
    axios
      .post("http://139.9.177.51:8099/users/upload", fd)
      .then(function (res) {
        console.log(res);
        if (res.data.status === 1) {
          //请求失败
          weui.toast(res.data.msg);//后台显示失败的失败信息
        } else {
          //成功
          console.log(res.data.data);
          //上传头像图片
          document.querySelector("#imgurl").src =
            "http://139.9.177.51:8099" + res.data.data;
        }
      });
  });

  //02:美化上传页面添加的input框,直接在页面设置diplay:none;

  //03:在给头像添加点击事件,在点击事件里面通过js去触发隐藏的input(type=file)的事件
  document.querySelector("#imgurl").addEventListener("click", function () {
    document.querySelector("#fileImg").click();
  });

  /*
   *7:保存用户信息,当参数比较多的时候,确保用户信息都正确后,在发送请求
   */

  // 点击保存信息按钮,发送请求
  document.querySelector("#saveBtn").addEventListener("click", function () {
    // 确保用户信息都正确后,在发送请求
    let params = {
      imgurl: document.querySelector("#imgurl").src,
      nickname: document.querySelector("#nickname").value,
      gender: document.querySelector("#sex").textContent,
      birthday: document.querySelector("#birthday").textContent,
      address:[
        document.querySelector("#province").textContent,
        document.querySelector("#city").textContent
      ],
      sign: document.querySelector("#sign").value,
      // userId:localStorage.getItem('userId')
      //简写
      userId: localStorage.userId,
    };
    console.log(params);

    axios
      .post("http://139.9.177.51:8099/users/userEdit", params)
      .then(function (res) {
        if (res.data.status === 0) {
          //成功
          weui.toast("修改成功", {
            callback: function () {
              location.href = "/main.html";
            },
          });
        } else {
          //失败
          weui.alert("修改失败");
        }
      });
  });
});
